<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="pragma" content="no-cache" />
    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
    <meta http-equiv="expires" content="0" />
    <title>FaceCat-JavaScript</title>
</head>
<body>
    <canvas id="exampleCanvas" width="400" height="700" style="position: fixed; left: 0px; top: 0px;" />
    <script type="text/javascript" src="facecat.js"></script>
    <script type="text/javascript">
        let canvasExample = document.getElementById("exampleCanvas"); //绘图区域
        canvasExample.width = window.innerWidth;
        canvasExample.height = window.innerHeight;
        let gPaint = new FCPaint(); //绘图对象
        gPaint.canvas = canvasExample;
        scaleCanvas(gPaint);
        //判断主题色
        gPaint.defaultUIStyle = "dark";
        let url = location.href;
        if (url.indexOf("color=light") != -1) {
            gPaint.defaultUIStyle = "light";
        }
        //判断移动端
        gPaint.isMobile = isMobileMode();
        if (gPaint.isMobile) {
            gPaint.scaleFactorX = 2.5;
            gPaint.scaleFactorY = 2.5;
        }
        addDefaultEvent(canvasExample, gPaint);

        let gList = new FCGrid();
        gList.dock = "fill";
        addView(gList, gPaint);
        if (gList.paint.defaultUIStyle == "dark") {
            gList.backColor = "rgb(0,0,0)";
            gList.borderColor = null;
            gList.textColor = "rgb(255,255,255)";
            gList.scrollBarColor = "rgb(100,100,100)";
        } else if (gList.paint.defaultUIStyle == "light") {
            gList.backColor = "rgb(230,230,230)";
            gList.borderColor = null;
            gList.textColor = "rgb(0,0,0)";
            gList.scrollBarColor = "rgb(200,200,200)";
        }

        gList.rowHeight = 80;
        gList.headerHeight = 30;
        let column1List = new FCGridColumn();
        column1List.text = "回到首页";
        column1List.font = "Default,14";
        column1List.widthStr = "100%";
        gList.columns.push(column1List);
        column1List.backColor = "rgba(25,25,25,200)";
        column1List.borderColor = "none";
        column1List.textColor = "rgb(200,200,200)";

        /*
        * 鼠标滚动实现方法
        * view:视图
        * mp:坐标
        * button:按钮
        * clicks:点击次数
        * delta:滚轮值
        */
        gPaint.onMouseWheel = function (view, mp, buttons, clicks, delta) {
            if (window.event.ctrlKey && view.paint) {
                //放大显示
                if (delta < 0) {
                    view.paint.scaleFactorX = view.paint.scaleFactorX + 0.1;
                    view.paint.scaleFactorY = view.paint.scaleFactorY + 0.1;
                    resizeAll();
                    //缩小显示
                } else if (delta > 0) {
                    if (view.paint.scaleFactorX > 0.2) {
                        view.paint.scaleFactorX = view.paint.scaleFactorX - 0.1;
                        view.paint.scaleFactorY = view.paint.scaleFactorY - 0.1;
                        resizeAll();
                    }
                }
                return;
            }
            replayTick = 0;
            tick = 0;
            clickIndex = -1;
            onMouseWheelDefault(view, mp, buttons, clicks, delta);
        };

        let buttonRects = [];
        let mouseMovePoint = new FCPoint();

        /*
        * 鼠标移动实现方法
        * view:视图
        * mp:坐标
        * button:按钮
        * clicks:点击次数
        * delta:滚轮值
        */
        gPaint.onMouseMove = function (view, mp, buttons, clicks, delta) {
            mouseMovePoint = mp;
            onMouseMoveDefault(view, mp, buttons, clicks, delta);
            if(buttons != 0){
                clickIndex = -1;
                tick = 0;
                replayTick = 0;
            }
            invalidateView(view);
            if(buttons != 0){
                clickIndex = -1;
                tick = 0;
                replayTick = 0;
            }
            let hoverButton = false;
            for(let i = 0; i < buttonRects.length; i++){
                let rect = buttonRects[i];
                if(mp.x >= rect.left && mp.x <= rect.right && mp.y >= rect.top && mp.y <= rect.bottom){
                    hoverButton = true;
                    break;
                }
            }
            if(hoverButton){
                gPaint.canvas.style.cursor = "pointer";
            }else{
                gPaint.canvas.style.cursor = "";
            }
        };

        /*
        * 触摸移动方法
        * view:视图
        * firstTouch:是否第一次触摸
        * firstPoint:第一次触摸的坐标
        * secondTouch:是否第二次触摸
        * secondPoint:第二次触摸的坐标
        */
        gPaint.onTouchMove = function(view, firstTouch, firstPoint, secondTouch, secondPoint){
            clickIndex = -1;
            tick = 0;
            replayTick = 0;
            onTouchMoveDefault(view, firstTouch, firstPoint, secondTouch, secondPoint);
        };

        /*
        * 重置大小
        */
        let resizeAll = function () {
            canvasExample.width = document.documentElement.clientWidth;
            canvasExample.height = document.documentElement.clientHeight;
            scaleCanvas(gPaint);
            updateViewDefault(gPaint.views);
            invalidate(gPaint);
        };

        /*
        * 监听大小改变
        */
        window.onresize = function () {
            resizeAll();
        };

        /*
        * 旋转监听
        */
        window.onorientationchange = function () {
            resizeAll();
        };

        /*
        * 重绘的实现方法
        * view:视图
        * paint:绘图对象
        * clipRect:裁剪区域
        */
        gPaint.onPaint = function (view, paint, clipRect) {
            buttonRects = [];
            onPaintDefault(view, paint, clipRect);
        };

        /*
        * 绘制单元格
        * grid:表格
        * row:行
        * column:列
        * cell:单元格
        * paint:绘图对象
        * left:左侧坐标
        * top:上方坐标
        * right:右侧坐标
        * bottom:下方坐标
        */
        gPaint.onPaintGridCell = function (grid, row, column, cell, paint, left, top, right, bottom) {
            let width = right - left, height = bottom - top;
            let colors = new Array();
            colors.push("rgb(170, 178, 189)");
            colors.push("rgb(140, 192, 81)");
            colors.push("rgb(59, 174, 218)");
            colors.push("rgb(219, 68, 83)");
            colors.push("rgb(246, 187, 67)");
            colors.push("rgb(216, 112, 173)");
            colors.push("rgb(150, 123, 220)");
            colors.push("rgb(75, 137, 220)");
            colors.push("rgb(185, 63, 150)");
            colors.push("rgb(233, 87, 62)");
            if (!paint.isMobile && width > 500) {
                let dColor = "rgba(50,50,50)";
                if (grid.paint.defaultUIStyle == "dark") {
                    paint.fillRoundRect("rgba(21,24,28,150)", left + 14, top + 5, right - 14, bottom - 5, 8);
                } else {
                    dColor = "rgb(200,200,200)";
                    paint.fillRoundRect("rgb(240,240,240)", left + 14, top + 5, right - 14, bottom - 5, 0);
                    paint.drawRoundRect(dColor, 1, 0, left + 14, top + 5, right - 14, bottom - 5, 0)
                }
            } else {
                if (grid.paint.defaultUIStyle == "dark") {
                    paint.fillRoundRect("rgb(21,24,28)", left + 14, top + 5, right - 14, bottom - 5, 10);
                } else {
                    paint.fillRoundRect("rgb(240,240,240)", left + 14, top + 5, right - 14, bottom - 5, 10);
                }
            }
            let baseUpper = cell.text1;
            let font1 = "Default,15";
            let font2 = "Default,12";
            let font3 = "Default,14";
            let tSize = paint.textSize(baseUpper, font1);
            let str = "A" + tSize.cy;
            if (str == "ANaN") {
                tSize.cy = 12;
            }
            let strVolume = cell.text3;
            let strPrice = cell.text4;
            let tSize2 = paint.textSize(strVolume, font2);
            str = "A" + tSize2.cy;
            if (str == "ANaN") {
                tSize2.cy = 12;
            }
            if (grid.paint.defaultUIStyle == "dark") {
                paint.drawText(baseUpper, "rgb(200,200,200)", font1, left + 26, top + height / 2 - tSize2.cy - tSize.cy / 2);
                paint.drawText(strVolume, "rgb(200,200,200)", font2, left + 39, top + height / 2 + tSize2.cy + 3 - tSize2.cy / 2);
            } else {
                paint.drawText(baseUpper, "rgb(50,50,50)", font1, left + 26, top + height / 2 - tSize2.cy - tSize.cy / 2);
                paint.drawText(strVolume, "rgb(50,50,50)", font2, left + 39, top + height / 2 + tSize2.cy + 3 - tSize2.cy / 2);
            }
            let drawColor = "rgb(255,0,0)";
            paint.fillEllipse(colors[Number(cell.linkType) - 1], left + 26, top + height / 2 + 4 + tSize2.cy - 4, left + 34, top + height / 2 + 4 + tSize2.cy + 4);
            let tSize5 = paint.textSize("100000.00%", font3);
            str = "A" + tSize5.cy;
            if (str == "ANaN") {
                tSize5.cy = 12;
            }
            let rate2 = 1 - 210 / width;
            if (gPaint.isMobile) {
                rate2 = 0.5;
            }
            let colRect = new FCRect(left + width * rate2 + 5, top + height / 2 - tSize5.cy - 4, left + width * rate2 + 5 + tSize5.cx, top + height / 2 + tSize5.cy + 3);
            if (!gPaint.isMobile && width > 500) {
                if (grid.paint.defaultUIStyle == "dark") {
                    paint.drawTextAutoEllipsis(strPrice, "rgb(200,200,200)", font3, left + 200 + 30, top + height / 2 - tSize5.cy / 2, width - 260, left + 230 + 5 + tSize5.cy - tSize5.cy / 2);
                } else {
                    paint.drawTextAutoEllipsis(strPrice, "rgb(50,50,50)", font3, left + 200 + 30, top + height / 2 - tSize5.cy / 2, width - 260, left + 230 + 5 + tSize5.cy - tSize5.cy / 2);
                }
                if (grid.paint.defaultUIStyle == "dark") {
                    paint.drawLine("rgb(0,0,0)", 2, 0, width - 240, top + 5, width - 240, bottom - 5);
                    paint.drawLine("rgb(0,0,0)", 2, 0, left + 210, top + 5, left + 210, bottom - 5);
                } else {
                    paint.drawLine("rgb(200,200,200)", 1, 0, width - 240, top + 5, width - 240, bottom - 5);
                    paint.drawLine("rgb(200,200,200)", 1, 0, left + 210, top + 5, left + 210, bottom - 5);
                }
                //paint.drawLine("rgb(50,50,50)", 1, 0, left + 200 + 5 - 10, top, left + 200 + 5 - 10, bottom);
                //paint.drawLine("rgb(50,50,50)", 1, 0, width - 220, top, width - 220, bottom);
            }
            if (grid.paint.defaultUIStyle == "dark") {
                if (!paint.isMobile && width > 500) {
                    paint.fillRoundRect("rgba(32,36,38,100)", colRect.left, top + 15, colRect.right, bottom - 15, 5);
                }else{
                    paint.fillRoundRect("rgb(32,36,38)", colRect.left, top + 15, colRect.right, bottom - 15, 5);
                }
                //paint.drawRoundRect("rgb(75,75,75)", 1, 0, colRect.left, colRect.top, colRect.right, colRect.bottom, 10);
            } else {
                paint.fillRoundRect("rgb(255,255,255)", colRect.left, top + 15, colRect.right, bottom - 15, 5);
                paint.drawRoundRect("rgb(200,200,200)", 1, 0, colRect.left, top + 15, colRect.right, bottom - 15, 5);
            }
            if(mouseMovePoint.x >= colRect.left && mouseMovePoint.x <= colRect.right && mouseMovePoint.y >= top + 15 && mouseMovePoint.y <= bottom - 15){
                paint.drawRoundRect("rgb(42,138,195)", 1, 0, colRect.left, top + 15, colRect.right, bottom - 15, 5);
            }
            buttonRects.push(new FCRect(colRect.left, top + 15, colRect.right, bottom - 15));
            let diffX = colRect.right - colRect.left + 10;
            if (cell.linkText2.length > 0) {
                if (grid.paint.defaultUIStyle == "dark") {
                    if (!paint.isMobile && width > 500) {
                        paint.fillRoundRect("rgba(32,36,38,100)", colRect.left + diffX, top + 15, colRect.right + diffX, bottom - 15, 5);
                    }else{
                        paint.fillRoundRect("rgb(32,36,38)", colRect.left + diffX, top + 15, colRect.right + diffX, bottom - 15, 5);
                    }
                    //paint.drawRoundRect("rgb(75,75,75)", 1, 0, colRect.left + diffX, colRect.top, colRect.right + diffX, colRect.bottom, 4);
                } else {
                    paint.fillRoundRect("rgb(255,255,255)", colRect.left + diffX, top + 15, colRect.right + diffX, bottom - 15, 5);
                    paint.drawRoundRect("rgb(200,200,200)", 1, 0, colRect.left + diffX, top + 15, colRect.right + diffX, bottom - 15, 5);
                }
                if(mouseMovePoint.x >= colRect.left + diffX && mouseMovePoint.x <= colRect.right + diffX && mouseMovePoint.y >= top + 15 && mouseMovePoint.y <= bottom - 15){
                    paint.drawRoundRect("rgb(42,138,195)", 1, 0, colRect.left + diffX, top + 15, colRect.right + diffX, bottom - 15, 5);
                }
                buttonRects.push(new FCRect(colRect.left + diffX, top + 15, colRect.right + diffX, bottom - 15));
            }
            cell.diffX = diffX;
            let tSize4 = paint.textSize(cell.linkText1, font3);
            let tSize6 = paint.textSize(cell.linkText2, font3);
            let offsetRight = 15;
            if (cell.image) {
                if (!cell.initImage) {
                    cell.initImage = true;
                    let image = new Image();
                    image.onload = function () {
                        cell.image2 = image;
                        invalidateView(grid);
                    };
                    image.src = cell.image;
                }
            }
            if (grid.paint.defaultUIStyle == "dark") {
                paint.drawText(cell.linkText1, "rgb(200,200,200)", font3, left + width * rate2 + 5 + tSize5.cx / 2 - tSize4.cx / 2 - 15, top + height / 2 - tSize4.cy / 2);
            } else {
                paint.drawText(cell.linkText1, "rgb(50,50,50)", font3, left + width * rate2 + 5 + tSize5.cx / 2 - tSize4.cx / 2 - 15, top + height / 2 - tSize4.cy / 2);
            }
            let tLeft1 = left + width * rate2 + 5 + tSize5.cx / 2 - tSize4.cx / 2 - 15 + tSize4.cx + 10;
            let tLeftRect = new FCRect(tLeft1 + 2, top + height / 2 - 10, tLeft1 + 20 - 2, top + height / 2 + 10);
            let pR = 6;
            let points1 = new Array();
            points1.push(new FCPoint(tLeftRect.left + (tLeftRect.right - tLeftRect.left) / 2 - pR, tLeftRect.top + (tLeftRect.bottom - tLeftRect.top) / 2 - pR));
            points1.push(new FCPoint(tLeftRect.left + (tLeftRect.right - tLeftRect.left) / 2 - pR, tLeftRect.top + (tLeftRect.bottom - tLeftRect.top) / 2 + pR));
            points1.push(new FCPoint(tLeftRect.left + (tLeftRect.right - tLeftRect.left) / 2 + pR, tLeftRect.top + (tLeftRect.bottom - tLeftRect.top) / 2));
            paint.fillPolygon("rgb(170,178,189)", points1);
            if (cell.linkText2.length > 0) {
                if (cell.image2) {
                    let tLeft = left + width * rate2 + 5 + tSize5.cx / 2 - tSize6.cx / 2 + diffX - offsetRight;
                    if (grid.paint.defaultUIStyle == "dark") {
                        paint.drawText(cell.linkText2, "rgb(200,200,200)", font3, tLeft, top + height / 2 - tSize4.cy / 2);
                    } else {
                        paint.drawText(cell.linkText2, "rgb(50,50,50)", font3, tLeft, top + height / 2 - tSize4.cy / 2);
                    }
                    paint.drawImage(cell.image2, tLeft + tSize6.cx + 10, top + height / 2 - 12, tLeft + tSize6.cx + 34, top + height / 2 + 12);
                } else {
                    let tLeft = left + width * rate2 + 5 + tSize5.cx / 2 - tSize6.cx / 2 + diffX - offsetRight;
                    if (grid.paint.defaultUIStyle == "dark") {
                        paint.drawText(cell.linkText2, "rgb(200,200,200)", font3, tLeft, top + height / 2 - tSize4.cy / 2);
                    } else {
                        paint.drawText(cell.linkText2, "rgb(50,50,50)", font3, tLeft, top + height / 2 - tSize4.cy / 2);
                    }
                    let tLeft1 = tLeft + tSize6.cx + 10;
                    tLeftRect = new FCRect(tLeft1 + 2, top + height / 2 - 10, tLeft1 + 20 - 2, top + height / 2 + 10);
                    let points1 = new Array();
                    points1.push(new FCPoint(tLeftRect.left + (tLeftRect.right - tLeftRect.left) / 2 - pR, tLeftRect.top + (tLeftRect.bottom - tLeftRect.top) / 2 - pR));
                    points1.push(new FCPoint(tLeftRect.left + (tLeftRect.right - tLeftRect.left) / 2 - pR, tLeftRect.top + (tLeftRect.bottom - tLeftRect.top) / 2 + pR));
                    points1.push(new FCPoint(tLeftRect.left + (tLeftRect.right - tLeftRect.left) / 2 + pR, tLeftRect.top + (tLeftRect.bottom - tLeftRect.top) / 2));
                    paint.fillPolygon("rgb(170,178,189)", points1);
                }
            }
            if (tick > 0 && clickIndex == row.index) {
                let overTimes = tick;
                if (overTimes > 360) {
                    overTimes -= 360;
                }
                let dRect = new FCRect(left + 14, top + 5, right - 14, bottom - 5);
                let dWidth = Math.min(dRect.right - dRect.left, dRect.bottom - dRect.top);
                let dInterval = 20;
                let dcWidth = grid.size.cx * 1.5;
                let dcWidth2 = 400;
                if (paint.isMobile) {
                    dcWidth = grid.size.cx;
                    dcWidth2 = 200;
                }
                let showRect = new FCRect(-dcWidth2 + dcWidth * (360 - overTimes) / dcWidth2, dRect.top, dcWidth * (360 - overTimes) / dcWidth2, dRect.bottom);
                if (showRect.left < dRect.left) {
                    showRect.left = dRect.left;
                }
                if (showRect.left > dRect.right) {
                    showRect.left = dRect.right;
                }
                if (showRect.right < dRect.left) {
                    showRect.right = dRect.left;
                }
                if (showRect.right > dRect.right) {
                    showRect.right = dRect.right;
                }
                if(replayTick > 9){
                    paint.fillRect("rgba(42,138,195,100)", showRect.left, showRect.top, showRect.right, showRect.bottom);
                }
                paint.drawRect("rgb(42,138,195)", 1, 0, dRect.left, dRect.top, dRect.right, dRect.bottom);
                if(replayTick > 9){
                    if (overTimes < 90) {
                        let fSize = (90 - overTimes) * (dWidth - dInterval) / 60;
                        let eSize = overTimes * (dWidth - dInterval) / 60;
                        paint.drawLine("rgba(42,138,195,200)", 3, 0, dRect.right - fSize, dRect.top, dRect.right, dRect.top);
                        paint.drawLine("rgba(42,138,195,200)", 3, 0, dRect.right, dRect.top, dRect.right, dRect.top + eSize);
                    }
                    else if (overTimes < 180) {
                        let fSize = (90 - (overTimes - 90)) * (dWidth - dInterval) / 60;
                        let eSize = (overTimes - 90) * (dWidth - dInterval) / 60;
                        paint.drawLine("rgba(42,138,195,200)", 3, 0, dRect.right, dRect.bottom - fSize, dRect.right, dRect.bottom);
                        paint.drawLine("rgba(42,138,195,200)", 3, 0, dRect.right, dRect.bottom, dRect.right - eSize, dRect.bottom);
                    }
                    else if (overTimes < 270) {
                        let fSize = (90 - (overTimes - 180)) * (dWidth - dInterval) / 60;
                        let eSize = (overTimes - 180) * (dWidth - dInterval) / 60;
                        paint.drawLine("rgba(42,138,195,200)", 3, 0, dRect.left, dRect.bottom, dRect.left + fSize, dRect.bottom);
                        paint.drawLine("rgba(42,138,195,200)", 3, 0, dRect.left, dRect.bottom, dRect.left, dRect.bottom - eSize);
                    }
                    else if (overTimes < 360) {
                        let fSize = (90 - (overTimes - 270)) * (dWidth - dInterval) / 60;
                        let eSize = (overTimes - 270) * (dWidth - dInterval) / 60;
                        paint.drawLine("rgba(42,138,195,200)", 3, 0, dRect.left, dRect.top, dRect.left + eSize, dRect.top);
                        paint.drawLine("rgba(42,138,195,200)", 3, 0, dRect.left, dRect.top, dRect.left, dRect.top + fSize);
                    }
                }
                let t1 = 6, t2 = 24;
                paint.beginPath();
                paint.addLine(dRect.left + t1, dRect.top + t2, dRect.left + t1, dRect.top + t1);
                paint.addLine(dRect.left + t1, dRect.top + t1, dRect.left + t2, dRect.top + t1);
                paint.drawPath("rgba(42,138,195,200)", 2, 0);
                paint.closePath();
                paint.beginPath();
                paint.addLine(dRect.left + t1, dRect.bottom - t2, dRect.left + t1, dRect.bottom - t1);
                paint.addLine(dRect.left + t1, dRect.bottom - t1, dRect.left + t2, dRect.bottom - t1);
                paint.drawPath("rgba(42,138,195,200)", 2, 0);
                paint.closePath();
                paint.beginPath();
                paint.addLine(dRect.right - t1, dRect.top + t2, dRect.right - t1, dRect.top + t1);
                paint.addLine(dRect.right - t1, dRect.top + t1, dRect.right - t2, dRect.top + t1);
                paint.drawPath("rgba(42,138,195,200)", 2, 0);
                paint.closePath();
                paint.beginPath();
                paint.addLine(dRect.right - t1, dRect.bottom - t2, dRect.right - t1, dRect.bottom - t1);
                paint.addLine(dRect.right - t1, dRect.bottom - t1, dRect.right - t2, dRect.bottom - t1);
                paint.drawPath("rgba(42,138,195,200)", 2, 0);
                paint.closePath();
            }
        };

        let checkPaint = function () {
            if (clickIndex != -1) {
                if (gPaint.isMobile) {
                    tick -= 20;
                } else {
                    tick -= 12;
                }
                if (tick <= 0){
                    replayTick--;
                    if(replayTick <= 0){
                        tick = 0;
                        clickIndex = -1;
                    }else{
                        tick = 720;
                    }
                }
                invalidate(gPaint);
            }
        };

        let clickIndex = -1;
        let tick = 0;
        let replayTick = 0;

        setInterval(checkPaint, 30);

        /*
        * 单元格的点击方法
        * grid: 表格
        * row: 行
        * column: 列
        * cell: 单元格
        * firstTouch:是否第一次触摸
        * firstPoint:第一次触摸的坐标
        * secondTouch:是否第二次触摸
        * secondPoint:第二次触摸的坐标
        * clicks:点击次数
        */
        gPaint.onClickGridCell = function (grid, row, column, cell, firstTouch, firstPoint, secondTouch, secondPoint, clicks) {
            let rate = 1 - 210 / grid.size.cx;
            if (gPaint.isMobile) {
                rate = 0.5;
            }
            if (firstPoint.x >= grid.size.cx * rate + cell.diffX && firstPoint.x <= grid.size.cx * rate + cell.diffX * 2) {
                window.location.href = cell.link2;
            } else if (firstPoint.x >= grid.size.cx * rate && firstPoint.x <= grid.size.cx * rate + cell.diffX) {
                 window.location.href = cell.link;
            } else {
                clickIndex = row.index;
                tick = 720;
                replayTick = 10;
            }
        };

        /*
        * 列的点击方法
        */
        gPaint.onClickGridColumn = function(grid, column, firstTouch, firstPoint, secondTouch, secondPoint, clicks) {
            window.location.href = "https://www.jjmfc.com";
        };

        if (true) {
            let row = new FCGridRow;
            gList.rows.push(row);
            let cell = new FCGridCell();
            cell.font = "Default,16";
            cell.colSpan = 1;
            cell.rowSpan = 1;
            cell.text1 = "应用+小程序";
            cell.text2 = "";
            cell.text3 = "app.html";
            cell.text4 = "下方有Tab页，点击后在上方显示不同的页面。";
            cell.link = "app.html";
            cell.link2 = "app.html?color=light";
            cell.linkText1 = "黑色";
            cell.linkText2 = "白色";
            cell.linkType = "1";
            row.cells.push(cell);
        }

        if (true) {
            let row = new FCGridRow;
            gList.rows.push(row);
            let cell = new FCGridCell();
            cell.font = "Default,16";
            cell.colSpan = 1;
            cell.rowSpan = 1;
            cell.text1 = "图表";
            cell.text2 = "";
            cell.text3 = "chart.html";
            cell.text4 = "高性能专业的图表，可以展示金融财经等数据，包含几十种指标和画线工具。";
            cell.link = "chart.html";
            cell.link2 = "chart.html?color=light";
            cell.linkText1 = "黑色";
            cell.linkText2 = "白色";
            cell.linkType = "2";
            row.cells.push(cell);
        }

        if (true) {
            let row = new FCGridRow;
            gList.rows.push(row);
            let cell = new FCGridCell();
            cell.font = "Default,16";
            cell.colSpan = 1;
            cell.rowSpan = 1;
            cell.text1 = "折线图";
            cell.text2 = "";
            cell.text3 = "chart2.html";
            cell.text4 = "用来测试图表的重绘能力，可以被改成个性化的折线图。";
            cell.link = "chart2.html";
            cell.link2 = "chart2.html?color=light";
            cell.linkText1 = "黑色";
            cell.linkText2 = "白色";
            cell.linkType = "3";
            row.cells.push(cell);
        }

        if (true) {
            let row = new FCGridRow;
            gList.rows.push(row);
            let cell = new FCGridCell();
            cell.font = "Default,16";
            cell.colSpan = 1;
            cell.rowSpan = 1;
            cell.text1 = "日历";
            cell.text2 = "";
            cell.text3 = "date.html";
            cell.text4 = "扩展性强，每个日月年的单元格都可以进行重绘，来制作个性化的日历。";
            cell.link = "date.html";
            cell.link2 = "date.html?color=light";
            cell.linkText1 = "黑色";
            cell.linkText2 = "白色";
            cell.linkType = "4";
            row.cells.push(cell);
        }


        if (true) {
            let row = new FCGridRow;
            gList.rows.push(row);
            let cell = new FCGridCell();
            cell.font = "Default,16";
            cell.colSpan = 1;
            cell.rowSpan = 1;
            cell.text1 = "滚动层";
            cell.text2 = "";
            cell.text3 = "div.html";
            cell.text4 = "多重图层视图嵌套，用来测试滚动是否正常。";
            cell.link = "div.html";
            cell.link2 = "div.html?color=light";
            cell.linkText1 = "黑色";
            cell.linkText2 = "白色";
            cell.linkType = "5";
            row.cells.push(cell);
        }

if (true) {
            let row = new FCGridRow;
            gList.rows.push(row);
            let cell = new FCGridCell();
            cell.font = "Default,16";
            cell.colSpan = 1;
            cell.rowSpan = 1;
            cell.text1 = "表格";
            cell.text2 = "";
            cell.text3 = "grid.html";
            cell.text4 = "基础表格视图，可以容纳大量的数据，每个单元格都可以重绘。";
            cell.link = "grid.html";
            cell.link2 = "grid.html?color=light";
            cell.linkText1 = "黑色";
            cell.linkText2 = "白色";
            cell.linkType = "6";
            row.cells.push(cell);
        }


        if (true) {
            let row = new FCGridRow;
            gList.rows.push(row);
            let cell = new FCGridCell();
            cell.font = "Default,16";
            cell.colSpan = 1;
            cell.rowSpan = 1;
            cell.text1 = "表格刷新";
            cell.text2 = "";
            cell.text3 = "gridlog.html";
            cell.text4 = "用不断加载的数据来测试表格的性格和稳定性。";
            cell.link = "gridlog.html";
            cell.link2 = "gridlog.html?color=light";
            cell.linkText1 = "黑色";
            cell.linkText2 = "白色";
            cell.linkType = "7";
            row.cells.push(cell);
        }

        if (true) {
            let row = new FCGridRow;
            gList.rows.push(row);
            let cell = new FCGridCell();
            cell.font = "Default,16";
            cell.colSpan = 1;
            cell.rowSpan = 1;
            cell.text1 = "柱状图";
            cell.text2 = "";
            cell.text3 = "histogram.html";
            cell.text4 = "用来测试图表的重绘能力，可以被改成个性化的折线图。";
            cell.link = "histogram.html";
            cell.link2 = "histogram.html?color=light";
            cell.linkText1 = "黑色";
            cell.linkText2 = "白色";
            cell.linkType = "8";
            row.cells.push(cell);
        }

        if (true) {
            let row = new FCGridRow;
            gList.rows.push(row);
            let cell = new FCGridCell();
            cell.font = "Default,16";
            cell.colSpan = 1;
            cell.rowSpan = 1;
            cell.text1 = "动态列表";
            cell.text2 = "";
            cell.text3 = "list.html";
            cell.text4 = "不断的对数据进行排序，并用动画的方式交换显示位置。";
            cell.link = "list.html";
            cell.link2 = "list.html?color=light";
            cell.linkText1 = "黑色";
            cell.linkText2 = "白色";
            cell.linkType = "9";
            row.cells.push(cell);
        }

        if (true) {
            let row = new FCGridRow;
            gList.rows.push(row);
            let cell = new FCGridCell();
            cell.font = "Default,16";
            cell.colSpan = 1;
            cell.rowSpan = 1;
            cell.text1 = "多Canvas";
            cell.text2 = "";
            cell.text3 = "multi.html";
            cell.text4 = "用来验证多个画板间是否相互冲突。";
            cell.link = "multi.html";
            cell.link2 = "multi.html?color=light";
            cell.linkText1 = "白色";
            cell.linkText2 = "";
            cell.linkType = "1";
            row.cells.push(cell);
        }

        if (true) {
            let row = new FCGridRow;
            gList.rows.push(row);
            let cell = new FCGridCell();
            cell.font = "Default,16";
            cell.colSpan = 1;
            cell.rowSpan = 1;
            cell.text1 = "价格列表";
            cell.text2 = "";
            cell.text3 = "price.html";
            cell.text4 = "用来展示动态加载的价格数据。";
            cell.link = "price.html";
            cell.link2 = "price.html?color=light";
            cell.linkText1 = "黑色";
            cell.linkText2 = "白色";
            cell.linkType = "2";
            row.cells.push(cell);
        }

        if (true) {
            let row = new FCGridRow;
            gList.rows.push(row);
            let cell = new FCGridCell();
            cell.font = "Default,16";
            cell.colSpan = 1;
            cell.rowSpan = 1;
            cell.text1 = "面积图";
            cell.text2 = "";
            cell.text3 = "pyrometer.html";
            cell.text4 = "高性能面积块图，不断的加载数据，不断的改变大小。";
            cell.link = "pyrometer.html";
            cell.link2 = "pyrometer.html?color=light";
            cell.linkText1 = "黑色";
            cell.linkText2 = "白色";
            cell.linkType = "3";
            row.cells.push(cell);
        }

 if (true) {
            let row = new FCGridRow;
            gList.rows.push(row);
            let cell = new FCGridCell();
            cell.font = "Default,16";
            cell.colSpan = 1;
            cell.rowSpan = 1;
            cell.text1 = "多页夹";
            cell.text2 = "";
     cell.text3 = "tab.html";
            cell.text4 = "基础的多页夹视图，可以显示和隐藏多个图层。";
            cell.link = "tab.html";
            cell.link2 = "tab.html?color=light";
            cell.linkText1 = "黑色";
            cell.linkText2 = "白色";
            cell.linkType = "4";
            row.cells.push(cell);
        }

        if (true) {
            let row = new FCGridRow;
            gList.rows.push(row);
            let cell = new FCGridCell();
            cell.font = "Default,16";
            cell.colSpan = 1;
            cell.rowSpan = 1;
            cell.text1 = "树型";
            cell.text2 = "";
            cell.text3 = "tree.html";
            cell.text4 = "可自由扩展的树视图，能容纳大量的数据。";
            cell.link = "tree.html";
            cell.link2 = "tree.html?color=light";
            cell.linkText1 = "黑色";
            cell.linkText2 = "白色";
            cell.linkType = "5";
            row.cells.push(cell);
        }

 if (true) {
            let row = new FCGridRow;
            gList.rows.push(row);
            let cell = new FCGridCell();
            cell.font = "Default,16";
            cell.colSpan = 1;
            cell.rowSpan = 1;
            cell.text1 = "分割布局";
            cell.text2 = "";
            cell.text3 = "split.html";
            cell.text4 = "分为绝对和百分比布局，可以左右或上下分割。";
            cell.link = "split.html";
            cell.link2 = "split.html?color=light";
            cell.linkText1 = "黑色";
            cell.linkText2 = "白色";
            cell.linkType = "6";
            row.cells.push(cell);
        }



        if (true) {
            let row = new FCGridRow;
            gList.rows.push(row);
            let cell = new FCGridCell();
            cell.font = "Default,16";
            cell.colSpan = 1;
            cell.rowSpan = 1;
            cell.text1 = "布局层";
            cell.text2 = "";
            cell.text3 = "layout.html";
            cell.text4 = "将视图按顺序排列，可以从上往下，或从左到右。";
            cell.link = "layout.html";
            cell.link2 = "layout.html?color=light";
            cell.linkText1 = "黑色";
            cell.linkText2 = "白色";
            cell.linkType = "7";
            row.cells.push(cell);
        }

        if (true) {
            let row = new FCGridRow;
            gList.rows.push(row);
            let cell = new FCGridCell();
            cell.font = "Default,16";
            cell.colSpan = 1;
            cell.rowSpan = 1;
            cell.text1 = "低代码配置";
            cell.text2 = "";
            cell.text3 = "future.html";
            cell.text4 = "加载通过IDE配置的界面，可以提高开发速度。";
            cell.link = "future.html";
            cell.link2 = "future.html?color=light";
            cell.linkText1 = "黑色";
            cell.linkText2 = "白色";
            cell.linkType = "8";
            row.cells.push(cell);
        }
        updateViewDefault(gPaint.views);
        //刷新界面
        invalidate(gPaint);
    </script>
</body>
</html>
